<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>Combination filters &middot; Isotope Demo</title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="../css/style.css" />
  
  <!-- scripts at bottom of page -->

</head>
<body class="demos ">
  
  <nav id="site-nav">
    <h1><a href="../index.html">Isotope</a></h1>

    <h2>Docs</h2>
    
    <ul>
      
        
          <li><a href="../docs/introduction.html">Introduction</a>
        
      
        
          <li><a href="../docs/options.html">Options</a>
        
      
        
          <li><a href="../docs/methods.html">Methods</a>
        
      
        
          <li><a href="../docs/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../docs/filtering.html">Filtering</a>
        
      
        
          <li><a href="../docs/sorting.html">Sorting</a>
        
      
        
          <li><a href="../docs/animating.html">Animating</a>
        
      
        
          <li><a href="../docs/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../docs/extending-isotope.html">Extending Isotope</a>
        
      
        
          <li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
        
      
        
          <li><a href="../docs/help.html">Help</a>
        
      
        
          <li><a href="../docs/license.html">License</a>
        
      
    </ul>
    
    <h2>Demos</h2>
    
    <ul>
      
        
          <li><a href="../demos/basic.html">Basic</a>
        
      
        
          <li><a href="../demos/elements-complete.html">Elements Complete</a>
        
      
        
          <li><a href="../demos/elements-partial.html">Elements Partial</a>
        
      
        
          <li><a href="../demos/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../demos/filtering.html">Filtering</a>
        
      
        
          <li><a href="../demos/sorting.html">Sorting</a>
        
      
        
          <li><a href="../demos/relayout.html">reLayout</a>
        
      
        
          <li><a href="../demos/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
        
      
        
          <li><a href="../demos/images.html">Images</a>
        
      
        
          <li class="current"><a href="#content">Combination filters</a></li>
        
      
        
          <li><a href="../demos/hash-history.html">Hash history</a>
        
      
        
          <li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
        
      
        
          <li><a href="../demos/removing.html">Removing</a>
        
      
    </ul>
    
    <h2>Custom layout modes</h2>
    
    <ul>
      
        
          <li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
        
      
        
          <li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
        
      
        
          <li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
        
      
        
          <li><a href="../custom-layout-modes/big-graph.html">BIG Graph</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-column-shift.html">Masonry Column Shift</a>
        
      
    </ul>
    
    <h2><a href="../tests/index.html">Tests</a></h2>
    
  </nav> <!-- #site-nav -->
  
  <section id="content">
    
      <h1>Combination filters</h1>
    

    <section id="copy">
  <p>Filters can be combined. In addition to filtering for just <code>.red</code> or <code>.tall</code>, you can pass in a filter selector of both: <code>.red.tall</code>.</p>
</section>

<section id="options" class="clearfix combo-filters">
  
  <h3>Filters</h3>

  
    <div class="option-combo color">
      <h4>color</h4>
      <ul class="filter option-set clearfix " data-filter-group="color"> 
        <li><a href="#filter-color-any" data-filter-value="" class="selected">any</a>
        
          <li><a href="#filter-color-red" data-filter-value=".red">red</a>
        
          <li><a href="#filter-color-blue" data-filter-value=".blue">blue</a>
        
          <li><a href="#filter-color-yellow" data-filter-value=".yellow">yellow</a>
        
      </ul>
    </div>
  
    <div class="option-combo size">
      <h4>size</h4>
      <ul class="filter option-set clearfix " data-filter-group="size"> 
        <li><a href="#filter-size-any" data-filter-value="" class="selected">any</a>
        
          <li><a href="#filter-size-small" data-filter-value=".small">small</a>
        
          <li><a href="#filter-size-wide" data-filter-value=".wide">wide</a>
        
          <li><a href="#filter-size-tall" data-filter-value=".tall">tall</a>
        
          <li><a href="#filter-size-big" data-filter-value=".big">big</a>
        
      </ul>
    </div>
  
    <div class="option-combo shape">
      <h4>shape</h4>
      <ul class="filter option-set clearfix " data-filter-group="shape"> 
        <li><a href="#filter-shape-any" data-filter-value="" class="selected">any</a>
        
          <li><a href="#filter-shape-round" data-filter-value=".round">round</a>
        
          <li><a href="#filter-shape-square" data-filter-value=".square">square</a>
        
      </ul>
    </div>
  

</section> <!-- #options -->

<div id="container" class="clearfix">
  
    
      
        <div class="color-shape small round red"></div>
      
        <div class="color-shape small round blue"></div>
      
        <div class="color-shape small round yellow"></div>
      
    
      
        <div class="color-shape small square red"></div>
      
        <div class="color-shape small square blue"></div>
      
        <div class="color-shape small square yellow"></div>
      
    
  
    
      
        <div class="color-shape wide round red"></div>
      
        <div class="color-shape wide round blue"></div>
      
        <div class="color-shape wide round yellow"></div>
      
    
      
        <div class="color-shape wide square red"></div>
      
        <div class="color-shape wide square blue"></div>
      
        <div class="color-shape wide square yellow"></div>
      
    
  
    
      
        <div class="color-shape tall round red"></div>
      
        <div class="color-shape tall round blue"></div>
      
        <div class="color-shape tall round yellow"></div>
      
    
      
        <div class="color-shape tall square red"></div>
      
        <div class="color-shape tall square blue"></div>
      
        <div class="color-shape tall square yellow"></div>
      
    
  
    
      
        <div class="color-shape big round red"></div>
      
        <div class="color-shape big round blue"></div>
      
        <div class="color-shape big round yellow"></div>
      
    
      
        <div class="color-shape big square red"></div>
      
        <div class="color-shape big square blue"></div>
      
        <div class="color-shape big square yellow"></div>
      
    
  
  
  
  
    
      
        <div class="color-shape small round red"></div>
      
        <div class="color-shape wide round red"></div>
      
        <div class="color-shape tall round red"></div>
      
        <div class="color-shape big round red"></div>
      
    
      
        <div class="color-shape small square red"></div>
      
        <div class="color-shape wide square red"></div>
      
        <div class="color-shape tall square red"></div>
      
        <div class="color-shape big square red"></div>
      
    
  
    
      
        <div class="color-shape small round blue"></div>
      
        <div class="color-shape wide round blue"></div>
      
        <div class="color-shape tall round blue"></div>
      
        <div class="color-shape big round blue"></div>
      
    
      
        <div class="color-shape small square blue"></div>
      
        <div class="color-shape wide square blue"></div>
      
        <div class="color-shape tall square blue"></div>
      
        <div class="color-shape big square blue"></div>
      
    
  
    
      
        <div class="color-shape small round yellow"></div>
      
        <div class="color-shape wide round yellow"></div>
      
        <div class="color-shape tall round yellow"></div>
      
        <div class="color-shape big round yellow"></div>
      
    
      
        <div class="color-shape small square yellow"></div>
      
        <div class="color-shape wide square yellow"></div>
      
        <div class="color-shape tall square yellow"></div>
      
        <div class="color-shape big square yellow"></div>
      
    
  
  
</div> <!-- #container -->

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.isotope.min.js"></script>
<script>
  $(function(){
    
    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.color-shape',
      masonry: {
        columnWidth: 80
      }
    });

    // filter buttons
    $('.filter a').click(function(){
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }
      
      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
      
      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });

  });
</script>
    
    <footer>
      Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
    </footer>
    
  </section> <!-- #content -->
  

</body>
</html>